<template>
      <Scroll :on-reach-bottom="handleReachBottom" height="800" loading-text="正在拼命加载中"> 
            <!-- <gItem v-for="item in list"  
            :key="item.id"
            :title="item.title"
            :des="item.des">
            <img :src="item.src" alt="">
            </gItem> -->
            <div class="gItemBox" v-for="(v,k) in list" :key="k" style="margin: 32px 0">
            <h5>{{v.title}}</h5>
            <img :src="v.src" alt="">
            <p>{{v.des}}</p>
            </div>
        </Scroll> 
</template>

<script>
export default {
    data() {
        return {
            msg:"我是group组件",
            list1:[],
            list:[],
            currentIndex:0,
            msg:false,
            obj: {}
        };
    },
    created() {        
            this.$http.get("../../../static/newslist1.json").then(res=>{
            // this.$axios("../../../static/newslist.json").then(res=>{
               console.log(res.data)
               this.list1=res.data;
                this.list=res.data[this.currentIndex]
                console.log(this.list)
        }) 
    },
    methods: {
    handleReachBottom (){
        return new Promise((resolve,reject)=>{
            setTimeout(() => {
                this.currentIndex++;  // 1
                if( this.currentIndex<=2) {
                   this.list=this.list.concat(this.list1[this.currentIndex]) 
                   //这里是二维数组转一维数组
                    console.log(this.list)
                      resolve();
                }else {
                  this.msg=true;
                  throw new Error("已经加载完毕了");
                  reject()
                }
            }, 500);
        })
    },
},
    components: {
       
    },
}
</script>

<style>

.gItemBox{
    width: 100%;
    /*float: left;*/
    /*height: 400px;*/
    padding: 10px;
    box-sizing: border-box;
  }
</style>
